<template>
  <el-dialog v-model="props.visible" title="" @close="closeDialog" :center="true" :align-center="true" width="1100px" class="normal-dialog">
    <template #header>
      <div class="flex-start-center" style="padding-left: 50px">
        <span style="font-size: 20px;color: #333333;font-weight: 500">请选择你的考试意向</span>
        <span style="margin-left: 20px;font-size: 14px;color: #676a73;font-weight: 400">可选择1个考试  随时调整</span>
      </div>
    </template>
    <div class="flex-start-center" style="padding: 20px 50px">
      <div v-for="(item, index) in data.courseList">
        <el-button class="select-button"  style="color: #676a73;" @click="selectHandle(item, index)" :style="data.selectedIndex == index? 'background-color: #04addb;color: #FFFFFF' : ''">{{item.name}}</el-button>
      </div>
    </div>

    <template #footer>
      <div class="flex-all-center">
        <el-button class="footer-button" color="#04addb" @click="submitHandle">选好了</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {defineProps, getCurrentInstance, reactive, watch} from "vue";
import {useRoute, useRouter} from 'vue-router';
import {getTreeDictByCode} from '../../api/home.js'
import {ElMessage} from 'element-plus'

const props = defineProps({
  visible: {
   type: Boolean,
   default: false
  },
  courseId: {
    type: String,
    default: null
  },
});

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const emits = defineEmits(['closeSelectExamDialog', 'afterSelectExamHandle'])

const data = reactive({
  courseList: [],
  selectedIndex: 0,
  selectedItem: {}
})
function initData() {
  getTreeDictByCode({typeCode: 'courseTypeCode'}, (res)=> {
    data.courseList = res.data
    data.selectedIndex = data.courseList.findIndex(item => item.id == props.courseId)
    data.selectedItem = data.courseList[data.selectedIndex]
  })
}

function closeDialog() {
  emits('closeSelectExamDialog');
}
function selectHandle(item, index) {
  data.selectedIndex = index
  data.selectedItem = item
}
function submitHandle() {
  if(JSON.stringify(data.selectedItem) !== '{}') {
    emits('afterSelectExamHandle', data.selectedItem,);
    closeDialog()
  } else {
    ElMessage.warning('请选择意向考试')
  }
}
watch(()=>props.courseId,(val)=> {
  initData()
})

</script>
<style lang="scss" scoped>
.select-button {
  font-size: 12px;
  padding: 9px 13px;
  margin: 0 30px 15px 0;
  font-weight: 500;
  border-radius: 38px;
  border: 1px #E2E2E2 solid;
  /*background: white;*/
  text-align: center;
  align-content: center;
  /*cursor: pointer;*/
}
.footer-button {
  padding: 20px 50px;
  border-radius: 42px;
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 400;
}
</style>
<style>
.tab-bar .el-tabs__nav-wrap::after{
  position: static !important;
}
.tab-bar .el-tabs__item{
  font-size: 20px;
}
.normal-dialog.el-dialog.is-align-center {
  padding: 20px 0;
  border-radius: 8px;
}
</style>
